<template>
  <div class="content">
    <transition-group
      tag="div"
      enter-active-class="animate__animated animate__flipInX animate__slow"
      appear
      class="content-images"
    >
      <div class="content-images-item" v-for="(item,index) in loserList" :key="index" @click="goToDetail(item)">
        <img :src="item.l_photos" alt="" />
      </div>
    </transition-group>
  </div>
</template>

<script lang="ts" setup>
import "animate.css";
import { onMounted, ref } from "vue";
import { useRouter } from 'vue-router'
import { getAllLosers } from '@/server/loser'

const router = useRouter()
const loserList = ref<any>([]);

onMounted(async () => {
  await getLoserList()
});

const getLoserList = () => {
  getAllLosers().then((res:any) => {
    loserList.value = res.data.filter((item:any) => item.state == 1).splice(0,6);
  })
}

// 查看单个详情
const goToDetail =(item:any) => {
  router.push({
    path:'/LoserDetail',
    query:{
      id:item.id
    }
  })
}
</script>

<style lang="less" scoped>
.content {
  padding: 20px;
  // background-color: #f0f0f0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  // padding: 100px 0;
  &-images {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 20px;
    &-item {
      // background-color: pink;
      box-shadow: 0 0 20px 0 rgb(161, 157, 158);
      width: 350px;
      height: 220px;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 10px;
      img {
        width: 100%;
        height: 100%;
        transition: all 0.6s;
        padding: 8px;
      }
      img:hover {
        cursor: pointer;
        transform: scale(1.3);
      }
    }
  }
}
</style>
